<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>成员列表</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="icon" type="image/png" href="./src/ico.ico">
  <link rel="apple-touch-icon-precomposed" href="./src/ico.ico">
  <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
  <link rel="stylesheet" href="assets/css/admin.css">
  <link rel="stylesheet" href="assets/css/app.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/footable.core.css">
  <link rel="stylesheet" href="./css/clock.css">
  <style>
    .table > tbody > tr > td,
    .table > tbody > tr > th,
    .table > tfoot > tr > td,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > thead > tr > th {
      padding: 2px;
    }

    .demoItem {
      position: relative;
      width: 100px;
      height: 20px;
      margin: 10px 20px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .animation1 .shape {
      display: inline-block;
      margin: 0 5px;
      width: 10px;
      height: 10px;
      opacity: 0.5;
    }

    .animation1 .shape-1 {
      background-color: #1875E5;
      animation: AnimationShape1 1.5s ease infinite;
    }

    .animation1 .shape-2 {
      background-color: #C5523F;
      animation: AnimationShape1 1.5s ease infinite 0.5s;
    }

    .animation1 .shape-3 {
      background-color: #499255;
      animation: AnimationShape1 1.5s ease infinite 0.8s;
    }

    .animation1 .shape-4 {
      background-color: #F2B736;
      animation: AnimationShape1 1.5s ease infinite 1s;
    }

    @keyframes AnimationShape1 {
      0% {
        transfrom: scale(1);
        opacity: 0.5;
      }

      50% {
        transform: scale(1.5);
        opacity: 1;
      }

      100% {
        transfrom: scale(0.5);
        opacity: 0.5;
      }
    }

    /* animation2 */
    .animation2 .con {
      width: 30px;
      height: 30px;
      position: relative;
    }

    .animation2 .shape {
      position: absolute;
      width: 10px;
      height: 10px;
      display: inline-block;
      border-radius: 50%;
      top: 40%;
    }

    .animation2 .shape-1 {
      background-color: #1875E5;
      animation: AnimationShape2 1s ease infinite;
    }

    .animation2 .shape-2 {

      left: 10px;
      background-color: #C5523F;
    }

    .animation2 .shape-3 {
      left: 20px;
      background-color: #499255;
    }

    .animation2 .shape-4 {
      background-color: #F2B736;
      left: 30px;
      animation: AnimationShape3 1s ease infinite;
    }

    @keyframes AnimationShape2 {
      0% {
        left: -15px;
        top: 5px;
      }

      25% {
        left: 0;
        top: 40%;
      }

      50% {
        left: 0;
        top: 40%;
      }

      75% {
        left: 0;
        top: 40%;
      }

      100% {
        left: -15px;
        top: 5px;
      }
    }

    @keyframes AnimationShape3 {
      0% {
        left: 30px;
        top: 40%;
      }

      25% {
        left: 30px;
        top: 40%;
      }

      50% {
        left: 45px;
        top: 5px;
      }

      75% {
        left: 30px;
        top: 40%;
      }

      100% {
        left: 30px;
        top: 40%;
      }
    }
  </style>
</head>

<body data-type="chart" style="background: #e9ecf3;">

<header class="am-topbar am-topbar-inverse admin-header">
  <div class="am-topbar-brand">
    <a class="tpl-logo">
      <img src="./src/ico.ico" alt="" class="catImg">
    </a>
  </div>
  <div class="am-icon-list tpl-header-nav-hover-ico am-fl am-margin-right">

  </div>

  <button
      class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
      data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span>
    <span
        class="am-icon-bars"></span></button>

  <div class="am-collapse am-topbar-collapse" id="topbar-collapse">

    <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list tpl-header-list">
      <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
        <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
          <span class="am-icon-bell-o"></span> 提醒 <span
            class="am-badge tpl-badge-success am-round">0</span></span>
        </a>
        <ul class="am-dropdown-content tpl-dropdown-content">
          <li class="tpl-dropdown-content-external">
            <h3>你有 <span class="tpl-color-success">0</span> 条提醒</h3><a href="###">全部</a>
          </li>

        </ul>
      </li>
      <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
        <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
          <span class="am-icon-comment-o"></span> 消息 <span
            class="am-badge tpl-badge-danger am-round">0</span></span>
        </a>
        <ul class="am-dropdown-content tpl-dropdown-content">
          <li class="tpl-dropdown-content-external">
            <h3>你有 <span class="tpl-color-danger">0</span> 条新消息</h3><a href="###">全部</a>
          </li>
        </ul>
      </li>
      <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
        <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
          <span class="am-icon-calendar"></span> 进度 <span
            class="am-badge tpl-badge-primary am-round">0</span></span>
        </a>
        <ul class="am-dropdown-content tpl-dropdown-content">
          <li class="tpl-dropdown-content-external">
            <h3>你有 <span class="tpl-color-primary">0</span> 个任务进度</h3><a href="###">全部</a>
          </li>
        </ul>
      </li>

      <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
        <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
          <span class="tpl-header-list-user-nick">小早苗</span><span
            class="tpl-header-list-user-ico"> <img
            src="./src/ico.ico"></span>
        </a>
        <ul class="am-dropdown-content">
          <li><a href="#"><span class="am-icon-bell-o"></span> 资料</a></li>
          <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
          <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
        </ul>
      </li>
      <li><a href="###" class="tpl-header-list-link"><span
          class="am-icon-sign-out tpl-header-list-ico-out-size"></span></a></li>
    </ul>
  </div>
</header>


<div class="tpl-page-container tpl-page-header-fixed">

  <div class="tpl-left-nav tpl-left-nav-hover">
    <div class="tpl-left-nav-title">
      列表
    </div>
    <div class="tpl-left-nav-list">
      <ul class="tpl-left-nav-menu">
        <li class="tpl-left-nav-item">
          <a href="index.html" class="nav-link">
            <i class="am-icon-home"></i>
            <span>首页</span>
          </a>
        </li>
        <li class="tpl-left-nav-item">
          <a href="peopleList.html" class="nav-link tpl-left-nav-link-list active">
            <i class="am-icon-bar-chart"></i>
            <span>各部成员</span>
            <!-- <i class="tpl-left-nav-content tpl-badge-danger">
                        12
                    </i> -->
          </a>
        </li>

        <li class="tpl-left-nav-item">
          <a href="javascript:;" class="nav-link tpl-left-nav-link-list">
            <i class="am-icon-table"></i>
            <span>部落战</span>
            <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
          </a>
          <ul class="tpl-left-nav-sub-menu">
            <li>
              <a href="currentwar.html">
                <i class="am-icon-angle-right"></i>
                <span>当前部落战情况</span>
                <i class="am-icon-star tpl-left-nav-content-ico am-fr am-margin-right"></i>
              </a>

              <a href="warlog.html">
                <i class="am-icon-angle-right"></i>
                <span>历史部落战统计</span>

              </a>
            </li>
          </ul>
        </li>

        <li class="tpl-left-nav-item">
          <a href="javascript:;" class="nav-link tpl-left-nav-link-list">
            <i class="am-icon-wpforms"></i>
            <span>联赛</span>
            <i
                class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right tpl-left-nav-more-ico-rotate"></i>
          </a>
          <ul class="tpl-left-nav-sub-menu" style="display: none;">
            <li>
              <a href="./leaguegroup.html">
                <i class="am-icon-angle-right"></i>
                <span>当前联赛情况</span>
                <i class="am-icon-star tpl-left-nav-content-ico am-fr am-margin-right"></i>
              </a>

              <a href="./leaguegroupLog.html">
                <i class="am-icon-angle-right"></i>
                <span>历史联赛统计</span>
              </a>
            </li>
          </ul>
        </li>

        <!-- <li class="tpl-left-nav-item">
                    <a href="login.html" class="nav-link tpl-left-nav-link-list">
                        <i class="am-icon-key"></i>
                        <span>登录</span>

                    </a>
                </li> -->
      </ul>
    </div>
  </div>


  <div class="tpl-content-wrapper">
    <div class="clock">
      <!-- 表盘 -->
      <div class="board">
        <div></div>
      </div>
      <div class="number"></div>
      <div class="pointers">
        <div class="h"></div>
        <div class="m"></div>
        <div class="s"></div>
      </div>
      <div class="dot"></div>
    </div>
    <div class="tpl-content-page-title">
      Bigcat 部落成员
    </div>
    <ol class="am-breadcrumb">
      <li><a href="#" class="am-icon-home">首页</a></li>
      <li><a href="#">菜单</a></li>
      <li class="am-active">部落成员</li>
    </ol>
    <div class="tpl-portlet-components">
      <div class="portlet-title">
        <div class="caption font-green bold">
          <span class="am-icon-code"></span> Bigcat-部落人员
        </div>
        <div class="tpl-portlet-input tpl-fz-ml">
          <div class="portlet-input input-small input-inline">
            <div class="input-icon right">
              <i class="am-icon-search"></i>
              <input type="text" class="form-control form-control-solid"
                     placeholder="搜索..."></div>
          </div>
        </div>
      </div>
      <div class="tpl-block">
        <div class="wrapper wrapper-content animated fadeInRight m-t-none"
             style="height: auto;">
          <div class="row">
            <div class="col-sm-12">
              <div class="ibox float-e-margins">
                <table class="footable table table-stripped" data-page-size="50"
                       data-filter="filter">
                  <thead>
                  <tr>
                    <th>排名</th>
                    <th>等级</th>
                    <th>名字</th>
                    <th>职位</th>
                    <th>捐</th>
                    <th>收</th>
                    <th>奖杯</th>
                  </tr>
                  </thead>
                  <tbody class="myTable">
                  </tbody>
                  <tfoot>
                  <tr>
                    <td colspan="7">
                      <ul class="pagination pull-right"></ul>
                    </td>
                  </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tpl-portlet-components">
      <div class="portlet-title">
        <div class="caption font-green bold">
          <span class="am-icon-code"></span> Bigcat Ⅱ-部落人员
        </div>
        <div class="tpl-portlet-input tpl-fz-ml">
          <div class="portlet-input input-small input-inline">
            <div class="input-icon right">
              <i class="am-icon-search"></i>
              <input type="text" class="form-control form-control-solid"
                     placeholder="搜索..."></div>
          </div>
        </div>
      </div>
      <div class="tpl-block">
        <div class="wrapper wrapper-content animated fadeInRight m-t-none"
             style="height: auto;">
          <div class="row">
            <div class="col-sm-12">
              <div class="ibox float-e-margins">
                <table class="footable table table-stripped" data-page-size="50"
                       data-filter="filter">
                  <thead>
                  <tr>
                    <th>排名</th>
                    <th>等级</th>
                    <th>名字</th>
                    <th>职位</th>
                    <th>捐</th>
                    <th>收</th>
                    <th>奖杯</th>
                  </tr>
                  </thead>
                  <tbody class="myTable2">
                  </tbody>
                  <tfoot>
                  <tr>
                    <td colspan="7">
                      <ul class="pagination pull-right"></ul>
                    </td>
                  </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tpl-portlet-components">
      <div class="portlet-title">
        <div class="caption font-green bold">
          <span class="am-icon-code"></span> Bigcat Ⅲ-部落人员
        </div>
        <div class="tpl-portlet-input tpl-fz-ml">
          <div class="portlet-input input-small input-inline">
            <div class="input-icon right">
              <i class="am-icon-search"></i>
              <input type="text" class="form-control form-control-solid"
                     placeholder="搜索..."></div>
          </div>
        </div>
      </div>
      <div class="tpl-block">
        <div class="wrapper wrapper-content animated fadeInRight m-t-none"
             style="height: auto;">
          <div class="row">
            <div class="col-sm-12">
              <div class="ibox float-e-margins">
                <table class="footable table table-stripped" data-page-size="50"
                       data-filter="filter">
                  <thead>
                  <tr>
                    <th>排名</th>
                    <th>等级</th>
                    <th>名字</th>
                    <th>职位</th>
                    <th>捐</th>
                    <th>收</th>
                    <th>奖杯</th>
                  </tr>
                  </thead>
                  <tbody class="myTable3">
                  </tbody>
                  <tfoot>
                  <tr>
                    <td colspan="7">
                      <ul class="pagination pull-right"></ul>
                    </td>
                  </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tpl-portlet-components">
      <div class="portlet-title">
        <div class="caption font-green bold">
          <span class="am-icon-code"></span> 树海之森-部落人员
        </div>
        <div class="tpl-portlet-input tpl-fz-ml">
          <div class="portlet-input input-small input-inline">
            <div class="input-icon right">
              <i class="am-icon-search"></i>
              <input type="text" class="form-control form-control-solid"
                     placeholder="搜索..."></div>
          </div>
        </div>
      </div>
      <div class="tpl-block">
        <div class="wrapper wrapper-content animated fadeInRight m-t-none"
             style="height: auto;">
          <div class="row">
            <div class="col-sm-12">
              <div class="ibox float-e-margins">
                <table class="footable table table-stripped" data-page-size="50"
                       data-filter="filter">
                  <thead>
                  <tr>
                    <th>排名</th>
                    <th>等级</th>
                    <th>名字</th>
                    <th>职位</th>
                    <th>捐</th>
                    <th>收</th>
                    <th>奖杯</th>
                  </tr>
                  </thead>
                  <tbody class="myTable4">
                  </tbody>
                  <tfoot>
                  <tr>
                    <td colspan="7">
                      <ul class="pagination pull-right"></ul>
                    </td>
                  </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>


<script src="./js/forRange.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/footable.all.min.js"></script>
<script src="./js/content.min.js"></script>
<script src="./js/key.js"></script>

<script>
  var myAllUrl = allUrl + 'getRenYuan.php?tag=';
  range( myAllUrl, $( '.myTable' ).eq( 0 ), '8CRUGCRU' );
  range( myAllUrl, $( '.myTable2' ).eq( 0 ), '28YOOP9V2' );
  range( myAllUrl, $( '.myTable3' ).eq( 0 ), '28U9CQCQU' );
  range( myAllUrl, $( '.myTable4' ).eq( 0 ), '289J0JRJV' );

  function range( myurl, table, tag ) {
    $.ajax( {
      url: myurl + tag,
      type: 'GET',
      success: getMessage,
      error: function ( e ) {
        console.log( e.status, e.statusText );//状态码和信息
        table.html( '失败，请尝试刷新..............' );
      },
      beforeSend: function () {
        table.html( '<div class="demoItem animation2"><div class="con"><div class="shape shape-1"></div><div class="shape shape-2"></div><div class="shape shape-3"></div><div class="shape shape-4"></div></div></div>' );
      }
    } )

    function getMessage( datas ) {
      var data = JSON.parse( datas );
      var myData = data.items;
      var str = '';
      myData.forEach( function ( ele, index ) {
        var role = ele.role;
        if ( role == 'admin' ) {
          role = '长老';
        } else if ( role == 'leader' ) {
          role = '首领';
        } else if ( role == 'member' ) {
          role = '成员';
        } else if ( role == 'coLeader' ) {
          role = '副首领';
        }
        if ( index % 2 == 0 ) {
          str += '<tr class="gradeA footable-odd"><td>' + ele.clanRank + '</td><td>' + ele.expLevel + '</td><td class="center"><img src=' + ele.league.iconUrls.small + ' style="width:25px"></img> ' + ele.name + '<td>' + role + '</td></td><td>' + ele.donations + '</td><td>' + ele.donationsReceived + '</td><td>' + ele.trophies + '</td></tr>';
        } else {
          str += '<tr class="gradeA footable-even"><td>' + ele.clanRank + '</td><td>' + ele.expLevel + '</td><td class="center"><img src=' + ele.league.iconUrls.small + ' style="width:25px"></img> ' + ele.name + '<td>' + role + '</td></td><td>' + ele.donations + '</td><td>' + ele.donationsReceived + '</td><td>' + ele.trophies + '</td></tr>';
        }
      } )
      table.html( str );
    }
  }

  $( '.catImg' ).on( 'click', function () {
    $( '.tpl-content-wrapper' )
        .hasClass( 'tpl-content-wrapper-hover' ) ? $( '.tpl-content-wrapper' )
        .removeClass( 'tpl-content-wrapper-hover' ) + $( '.tpl-left-nav' )
        .css( { display: 'block' } ) : $( '.tpl-content-wrapper' )
        .addClass( 'tpl-content-wrapper-hover' ) + $( '.tpl-left-nav' )
        .css( { display: 'none' } );
  } )
</script>
<script>
  $( document ).ready( function () {
    $( ".footable" ).footable();
  } );
</script>
<script src="assets/js/app.js"></script>
<script src="./js/clock.js"></script>
</body>

</html>
